<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg1">
            <User />
          </el-icon>
          <div class="card-content">
            <p>{{ users }}</p>
            <div>用户数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg2">
            <Share />
          </el-icon>
          <div class="card-content">
            <p>{{ posts }}</p>
            <div>社区动态数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg3">
            <ChatDotRound />
          </el-icon>
          <div class="card-content">
            <p>{{ comments }}</p>
            <div>评论数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" body-class="card-body">
          <el-icon class="card-icon bg4">
            <VideoPlay />
          </el-icon>
          <div class="card-content">
            <p>{{ play_count }}</p>
            <div>歌曲播放量</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mgb20" style="margin-top: 20px;">
      <el-col :span="18">
        <el-card shadow="hover">
          <div class="card-header">
            <p class="card-header-title">发布动态</p>
            <p class="card-header-desc">该星期7天发布社区动态信息</p>
          </div>
          <v-chart class="chart" :option="dashOpt1" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-header">
            <p class="card-header-title">用户男女比例</p>
            <p class="card-header-desc">数量统计</p>
          </div>
          <v-chart class="chart" :option="dashOpt2" />
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts" name="dashboard">


// import countup from '@/components/countup.vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

import chinaMap from '@/utils/china';

// 导入接口地址
import request from '../api/http'
import { reactive, ref } from 'vue';
import { graphic } from 'echarts/core';

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  LineChart,
  PieChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent,
  MapChart,
]);
registerMap('china', chinaMap);

const token = ref(localStorage.getItem('TOKEN'));

const dashOpt1 = reactive({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  grid: {
    top: '2%',
    left: '2%',
    right: '3%',
    bottom: '2%',
    containLabel: true,
  },
  color: ['#f44336', '#009688'],
  series: [
    // {
    //     type: 'line',
    //     areaStyle: {
    //         color: new graphic.LinearGradient(0, 0, 0, 1, [
    //             {
    //                 offset: 0,
    //                 color: 'rgba(0, 150, 136,0.8)',
    //             },
    //             {
    //                 offset: 1,
    //                 color: 'rgba(0, 150, 136,0.2)',
    //             },
    //         ]),
    //     },
    //     smooth: true,
    //     data: [120, 132, 301, 134, 90, 230, 210],
    // },
    {
      type: 'line',
      smooth: true,
      data: [220, 122, 191, 234, 190, 130, 310],
    },
  ],
});


const dashOpt2 = reactive({
  legend: {
    bottom: '1%',
    left: 'center',
  },
  color: ['#f44336', '#93DB70'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2,
      },
      data: [
        { value: 1048, name: '男' },
        { value: 735, name: '女' },
      ],
    },
  ],
})

let users = ref(0);
let posts = ref(0);
let comments = ref(0);
let play_count = ref(0);

const init = async () => {
  console.log("TOKEN:", token.value);

  // 用户的数量
  await request.getUserCount({ token: token.value }).then(
    content => {
      console.log(0, content)
      let { code, user_count } = content;
      if (code == 200) {
        users.value = user_count
      }
    }
  )

  // 社区动态数量
  await request.getCommunityCount({ token: token.value }).then(
    content => {
      console.log(1, content)
      let { code, post_count } = content;
      if (code == 200) {
        posts.value = post_count
      }
    }
  )

  // 评论数量
  await request.getCommentCount({ token: token.value }).then(
    content => {
      console.log(2, content)
      let { code, comment_count } = content;
      if (code == 200) {
        comments.value = comment_count
      }
    }
  )

  // 歌曲播放量
  await request.getSongCount({ token: token.value }).then(
    content => {
      console.log(3, content)
      let { code, total_play_count } = content;
      if (code == 200) {
        play_count.value = total_play_count
      }
    }
  )

 // 用户男女比例
  await request.getUserGenderCount({ token: token.value }).then(
    content => {
      console.log(3, content)
      let { code, data } = content;
      if (code == 200) {
        console.log("data:", data);
        dashOpt2.series[0].data = data;
      } else {
        console.log("error:", content);
      }
    }
  )

  // 最近15天发布的数据
  await request.getCommunityWeekCount({ token: token.value }).then(
    content => {
      // console.log(4,content)
      let { code, data } = content;
      if (code == 200) {
        // 折线图展示对应的数量
        console.log("data:", data);
        dashOpt1.series[0].data = data;
      } else {
        console.log("error:", content);
      }
    }
  )
}

init()

</script>

<style>
.card-body {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0;
}
</style>
<style scoped>
.card-content {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 0 20px;
}

.card-num {
  font-size: 30px;
}

.card-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.bg1 {
  background: #2d8cf0;
}

.bg2 {
  background: #64d572;
}

.bg3 {
  background: #f25e43;
}

.bg4 {
  background: #e9a745;
}

.color1 {
  color: #2d8cf0;
}

.color2 {
  color: #64d572;
}

.color3 {
  color: #f25e43;
}

.color4 {
  color: #e9a745;
}

.chart {
  width: 100%;
  height: 400px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #000;
}

.timeline-time,
.timeline-desc {
  font-size: 12px;
  color: #787878;
}

.rank-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.rank-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.rank-item-content {
  flex: 1;
}

.rank-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #343434;
  margin-bottom: 10px;
}

.rank-item-desc {
  font-size: 14px;
  color: #999;
}

.map-chart {
  width: 100%;
  height: 350px;
}
</style>
